<!--
 * @Author: ranjianglai
 * @Date: 2023-01-12 17:27:41
 * @Description: 搜索
-->


<template>
    <view class="type-area cus-page">
        <!-- 导航栏 -->
        <ct-navbar leftIconType="back" bgColor="transparent" :search="{show:true}" /> 
        <!-- 搜索历史 -->
        <view class="com-m-t-56">
            <view class="com-flex com-row-between">
                <text class="com-font-32 com-font-bold">搜索历史</text>
                <u-icon name="trash" size="38rpx" top="-2rpx"></u-icon>
            </view>
            <view class="com-m-t-16 com-flex com-flex-wrap content">
                <view v-for="(item,index) in list1" :key="index" class="item u-line-1">{{item}}</view>
            </view>
        </view>
        <!-- 热门搜索 -->
        <view class="com-m-t-56">
            <view class="com-flex com-row-between">
                <text class="com-font-32 com-font-bold hot">热门搜索</text>
                <view class="com-flex">
                    <text class="com-m-r-8 com-assist-color">换一批</text>
                    <u-icon name="reload" size="34rpx" top="-1rpx"></u-icon>
                </view>
            </view>
            <view class="com-m-t-16 com-flex com-flex-wrap content">
                <view v-for="(item,index) in list2" :key="index" class="item u-line-1">{{item}}</view>
            </view>
        </view>
    </view>
</template>


<script>
export default {
    name:'search',
    components: {},
    props:{},

    data () {
        return {
            list1: ["测试","精灵宝可梦","迪士尼比利夫收藏卡","排球少年","2ds","入魔了!人间君"],
            list2: ["测试","精灵宝可梦","迪士尼比利夫收藏卡","排球少年","2ds","入魔了!人间君","测试","精灵宝可梦","排球少年","2ds"]
        }
    },

    computed: {},
    watch: {},
    
    onLoad() {},
    mounted() {},

    methods: {}
}
</script>


<style scoped lang='scss'>
    .hot{
        background: linear-gradient(-90deg, #C3B0FF 0%, #32CCF2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .item{
        max-width: 210rpx;
        height: 56rpx;
        border-radius: 56rpx;
        background: #eee;
        margin: 16rpx 24rpx 0 0;
        padding: 0 24rpx;
        line-height: 56rpx;
        color: #666;
    }
</style>